<template>
  <div class="app-container">
    <!-- 查询对话框-->
    <el-dialog :close-on-click-modal="false" title="更多查询" :visible.sync="moreFilter" width="850px" append-to-body>
      <el-form :model="queryParams" ref="moreFilterForm" size="small" :inline="true" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="是否回单" prop="isBack">
              <el-select clearable filterable v-model="queryParams.isBack" placeholder="请选择是否回单">
                <el-option v-for="dict in dict.type.CommIsNot" :key="dict.value" :label="dict.label"
                  :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货单号" prop="relateBill1">
              <el-input v-model="queryParams.relateBill1" placeholder="请输入发货单号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单号" prop="relateBill2">
              <el-input v-model="queryParams.relateBill2" placeholder="请输入客户单号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收入确认状态" prop="isConfirm">
              <el-select filterable v-model="queryParams.isConfirm" placeholder="请选择收入确认状态" clearable>
                <el-option v-for="dict in dict.type.ConfirmStatus" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开单日期">
              <el-date-picker v-model="queryParams.daterangeTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运输性质" prop="transportPro">
              <el-select filterable v-model="queryParams.transportPro" placeholder="请选择运输性质" clearable>
                <el-option v-for="dict in dict.type.TransportPro" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发网点" prop="jcOrganizationId">
              <el-select clearable filterable v-model="queryParams.jcOrganizationId" placeholder="请选择目的网点">
                <el-option v-for="dict in dict.type.DB_JC_ORG" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发运点" prop="fromServerZoneIdDtLabel">
              <el-input v-model="queryParams.fromServerZoneIdDtLabel" placeholder="请填写出发运点" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的网点" prop="jcToOrganizationId">
              <el-select clearable filterable v-model="queryParams.toOrg" placeholder="请选择目的网点">
                <el-option v-for="dict in dict.type.DB_JC_ORG" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的运点" prop="toServerZoneIdDtLabel">
              <el-input v-model="queryParams.toServerZoneIdDtLabel" placeholder="请填写目的运点" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际运抵日期">
              <el-date-picker v-model="queryParams.daterangeFactArriveTime" style="width: 240px" value-format="yyyy-MM-dd"
                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际发运时间">
              <el-date-picker v-model="queryParams.daterangeFactLeaveTime" style="width: 240px" value-format="yyyy-MM-dd"
                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求到达时间">
              <el-date-picker v-model="queryParams.daterangePlanArriveTime" style="width: 240px" value-format="yyyy-MM-dd"
                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求发运时间">
              <el-date-picker v-model="queryParams.daterangePlanLeaveTime" style="width: 240px" value-format="yyyy-MM-dd"
                type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleQuery">确 定</el-button>
        <el-button @click="moreFilter = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "BackOrderMoreQuery",
    dicts: ['ConfirmStatus', 'TransportPro', 'CommIsNot', 'DB_JC_ORG'],
    props: {
      queryParams: {
        type: Object
      }
    },
    data() {
      return {
        moreFilter: false
      }
    },
    methods: {
      // 取消按钮
      moreFilterQuery() {
        this.moreFilter = true
      },
      resetQuery() {
        this.daterangeTime = [];
        this.daterangeFactArriveTime = [];
        this.daterangeFactLeaveTime = [];
        this.daterangePlanArriveTime = [];
        this.daterangePlanLeaveTime = [];
        this.resetForm("moreFilterForm");
      },
      /** 提交按钮 */
      handleQuery() {
        this.moreFilter = false
        this.$emit("ok")
      }
    }
  };
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
  width: 362px;
}
</style>
